<template>
  <div>
    <span :class="style.noticeBadge">填空</span>
    <span v-for="(text,index) in data.content" :key="index" class="wrapper">
      <span v-if="text.substr(0,1)!='@'" class="plain">{{text}}</span>
      <input
        v-if="text.substr(0,1)==='@'"
        class="blank text-danger"
        :style="getStyleWidth(text)"
        :ref="'input_'+index"
      >
    </span>
    <button @click="showInputs">show</button>
  </div>
</template>

<script>
export default {
  name: "ViewFB",
  props: ["data"],
  data() {
    return {
      inputs: null
    };
  },
  computed: {
    style() {
      return this.$store.state.style;
    }
  },
  methods: {
    getStyleWidth(value) {
      return "width:" + (value.length + 1) + "em";
    },
    showInputs() {
      this.inputs = [];
      for (let i = 0; i < this.data.content.length; i++) {
        if (this.$refs["input_" + i]) {
          this.inputs.push(this.$refs["input_" + i][0].value);
        }
      }
      window.console.log(this.inputs);
    }
  },
  watch: {
    data() {
      this.inputs = null;
    }
  },
  mounted() {
    //this.inputs = new Array(this.data.length);
  }
};
</script>

<style scoped>
.custom {
  margin: auto;
}
.plain {
  color: black;
  border: none;
}
.blank {
  border: none;
  border-bottom: 1px solid black;
}
.wrapper {
  background: transparent;
}
</style>

